<template>
  <view class="tabbar-container">
    <block>
      <view
        class="tabbar-item"
        v-for="(item, index) in tabbarList"
        :key="index"
        @click="changeItem(item)"
      >
        <view class="item-top">
          <image
            :src="currentItem == item.id ? item.selectIcon : item.icon"
          ></image>
        </view>
        <view
          class="item-bottom"
          :class="[currentItem == item.id ? 'item-active' : '']"
        >
          <text class="fz_20">{{ item.text }}</text>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  props: {
    currentPage: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      currentItem: 0,
      tabbarList: [
        {
          id: 0,
          path: "/pages/home/index",
          icon: "/static/images/home-unselected.png",
          selectIcon: "/static/images/home-selected.png",
          text: "首页",
        },
        {
          id: 1,
          path: "/pages/myTask/index",
          icon: "/static/images/task-unselected.png",
          selectIcon: "/static/images/task-selected.png",
          text: "工作台",
        },
        {
          id: 2,
          path: "/pages/my/index",
          icon: "/static/images/profile-unselected.png",
          selectIcon: "/static/images/profile-selected.png",
          text: "我的",
        },
      ],
    };
  },
  mounted() {
    this.currentItem = this.currentPage;
    uni.hideTabBar();
  },
  methods: {
    changeItem(item) {
      let _this = this;
      _this.currentItem = item.id;
      uni.switchTab({
        url: item.path,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
view {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background-color: #ffffff;
}

.tabbar-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  // height: 147rpx;
  // box-shadow: 0 0 5px #999;
  display: flex;
  align-items: center;
  padding: 5rpx 0;
  color: #999999;

  box-shadow: 0rpx 0rpx 8rpx 0rpx #cccccc;

  padding-bottom: constant(safe-area-inset-bottom);
  /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom);
  /* 兼容 iOS >= 11.2 */
}

.tabbar-container .tabbar-item {
  width: 50%;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.tabbar-container .item-active {
  color: #436be6;
}

.tabbar-container .center-item {
  display: block;
  position: relative;
}

.tabbar-container .tabbar-item .item-top {
  width: 48rpx;
  height: 48rpx;
  // padding: 10rpx;
}

.tabbar-container .center-item .item-top {
  flex-shrink: 0;
  width: 88rpx;
  height: 88rpx;
  position: absolute;
  top: -30rpx;
  left: calc(50% - 45rpx);
  border-radius: 50%;
}

.tabbar-container .tabbar-item .item-top image {
  width: 100%;
  height: 100%;
}

.tabbar-container .tabbar-item .item-bottom {
  font-size: 28rpx;
  width: 100%;
}

.tabbar-container .center-item .item-bottom {
  position: absolute;
  bottom: 0;
  margin-bottom: 6rpx;
}
.fz_20{
  font-size: 20rpx;
}
</style>
